<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :xl="8" :lg="9" :md="10" :sm="24">
            <a-form-item label="产品名称">
              <j-dict-select-tag
                type="radio"
                placeholder="请选择产品"
                v-model="queryParam.proname"
                dictCode="proname"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="标题">
              <a-input placeholder="请输入标题" v-model="queryParam.titlesummary"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="问题类型">
              <j-dict-select-tag
                type="radio"
                placeholder="请选择问题类型"
                v-model="queryParam.questiontype"
                dictCode="task_type"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="9" :md="10" :sm="24">
            <a-form-item label="紧急程度">
              <j-dict-select-tag
                type="radio"
                placeholder="请选择紧急程度"
                v-model="queryParam.priority"
                dictCode="jjcd"
              />
            </a-form-item>
          </a-col>

          <a-col :xl="8" :lg="9" :md="10" :sm="24">
            <a-form-item label="问题/处理状态">
              <a-select default-value="" v-model="queryParam.auditstatus" >
                <a-select-option value="0">
                  待提交
                </a-select-option>
                <a-select-option value="1">
                  审批中
                </a-select-option>
                <a-select-option value="3">
                  退回
                </a-select-option>
                <a-select-option value="开发方案出具中">
                  通过-方案出具中
                </a-select-option>
                <a-select-option value="方案已确认">
                  方案已确认
                </a-select-option>
                <a-select-option value="待办">
                  待办
                </a-select-option>
                <a-select-option value="处理中">
                  处理中
                </a-select-option>
                <a-select-option value="代码完成">
                  代码完成
                </a-select-option>
                <a-select-option value="测试环境更新">
                  测试环境更新
                </a-select-option>
                <a-select-option value="测试完成">
                  测试完成
                </a-select-option>
                <a-select-option value="待发布">
                  待发布
                </a-select-option>
                <a-select-option value="发布完成">
                  发布完成
                </a-select-option>
                <a-select-option value="完成">
                  完成
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="4" :lg="9" :md="10" :sm="24">
            <a-form-item>
              <a-checkbox v-model="queryParam.isme" @change="onChange"> 我提出的</a-checkbox>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <span style="float: right">
          <a @click="loadData()"><a-icon type="sync"/>刷新</a>
          <a-divider type="vertical"/>
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
            <template slot="content">
              <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 400px">
                  <template v-for="(item, index) in defColumns">
                    <template v-if="item.key != 'rowIndex' && item.dataIndex != 'action'">
                      <a-col :span="12">
                        <a-checkbox :value="item.dataIndex">
                          <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                        </a-checkbox>
                      </a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a><a-icon type="setting"/>设置</a>
          </a-popover>
        </span>
      </div>

      <a-table
        v-if="(sxzt = true)"
        ref="table"
        size="small"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <span slot="itemjjcd" slot-scope="itemjjcd, record">
          <a-tag :color="itemjjcd === '高级'||itemjjcd==='最高级' ? 'volcano' : ''">{{ itemjjcd }}</a-tag>
        </span>

        <span slot="itemwtlx" slot-scope="itemwtlx, record">
          <span slot="itemwtlx" slot-scope="itemwtlx, record">
            <a-tag :color="itemwtlx === '数据修改' ? 'volcano' : ''">{{ itemwtlx }}</a-tag>
          </span>
          <span slot="itemxqlx" slot-scope="itemxqlx, record">
            <a-tag :color="itemxqlx === 'BUG' ? 'volcano' : ''">{{ itemxqlx }}</a-tag>
          </span>

          <span slot="itemtext" slot-scope="itemtext, record">
            <a-tag :color="itemtext === '通过' ? 'green' : itemtext === '审批中' ? 'geekblue' : 'volcano'">{{
              itemtext
            }}</a-tag>
          </span>
          <span slot="itemclzt" slot-scope="itemclzt, record">
            <a-tag :color="itemclzt === '已处理' ? 'green' : 'cyan'">{{ itemclzt }}</a-tag>
          </span>
          <a-tag :color="itemwtlx === '数据修改' ? 'volcano' : ''">{{ itemwtlx }}</a-tag>
        </span>
        <span slot="itemxqlx" slot-scope="itemxqlx, record">
          <a-tag :color="itemxqlx === 'BUG' ? 'volcano' : ''">{{ itemxqlx }}</a-tag>
        </span>

        <span slot="itemtext" slot-scope="itemtext, record">

          <a-tag v-if="itemtext != '退回' && itemtext != '待提交' && itemtext != '通过'" :color="itemtext === '审批中' ? 'geekblue' : 'green'">{{ itemtext }}</a-tag>

          <a @click="startProcess(record)" >
            <a-tag color="volcano" v-if="itemtext == '待提交'">
              {{ itemtext }}
            </a-tag>
          </a>

          <!-- <a-tag color="volcano" v-if="itemtext == '通过'">
            {{ record.dealstatus }}
          </a-tag> -->

          <a-tag color="green" v-if="itemtext=='通过'&&(record.fashbj == '0' || record.fashbj == '1' || record.fashbj == '3')">
            出具方案中
          </a-tag>

          <a-tag color="green" v-if="itemtext=='通过'&&record.fashbj == '2'&&(record.isjira=='0'||record.isjira==''||record.isjira==null)">
            方案已确认
          </a-tag>

          <a-tag color="volcano" v-if="itemtext=='通过'&&record.fashbj == '2'&&record.isjira=='1'">
            {{ record.dealstatus }}
          </a-tag>

          <a @click="startProcess(record)">
            <a-tag color="red" v-if="itemtext == '退回'">
              <span>
                <j-ellipsis :value="itemtext + backText + record.backcause" :length="20"/>
              </span>
            </a-tag>
          </a>

        </span>
        <span slot="itemclzt" slot-scope="itemclzt, record">
          <a-tag :color="itemclzt === '已处理' ? 'green' : 'cyan'">{{ itemclzt }}</a-tag>
        </span>

        <span slot="action" slot-scope="text, record">

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>

              <a-menu-item v-if="wtusername == record.createById && (record.auditstatus == '0'||record.auditstatus == '3')">
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>

              <a-menu-item v-if="(record.auditstatus == '0' || record.auditstatus == '3') && wtusername == record.createById ">
                <a @click="startProcess(record)">提交流程</a>
              </a-menu-item>
              <!-- <a-menu-item v-if="record.auditstatus != '0'">
                <a @click="seeProcess(record)">查看流程</a>
              </a-menu-item> -->
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDeletebyscbj(record.id)">
                  <a v-if="wtusername == record.createById && (record.auditstatus == '3'||record.auditstatus == '0')">删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

        <span slot="titleDetail" slot-scope="text, record">
          <a @click="handleDetail(record)">{{ text }}</a>
        </span>

        <span slot="yxfw" slot-scope="text, record">
          <a @click="query(record)">查看</a>
        </span>
      </a-table>
    </div>
    <a-modal v-model="visible" title="查看影响地区行业" centered @ok="handleOk">
      <a-table :columns="dqhycolumns" :data-source="tabledata" bordered></a-table>
    </a-modal>

    <a-drawer
      title="查看流程"
      placement="right"
      :closable="false"
      :width="300"
      :visible="draweris"
      @close="onClose">
      <a-timeline>
        <a-timeline-item v-for="todo in todos">
          <a-icon slot="dot" :type="jdjpg" style="font-size: 16px"/>
          <div v-for="tod in todo">
            <div v-for="to in tod">
              <a-divider>
                {{ to.nodename }} -- <span style="color: #374cc2" v-if="to.isnew == 2">
                  <a-tag color="green">已审批</a-tag>
                </span
                ><span style="color: #374cc2" v-if="to.isnew == 0"><a-tag color="">未开始</a-tag></span>
                <span style="color: #c2a943" v-if="to.isnew == 1"><a-tag color="blue">待审批</a-tag></span>
              </a-divider>

              <p v-if="to.isnew == '2'">审核时间：{{ to.audittime }}</p>
              <p>审核类型：{{ to.auditrange }}</p>
              <p>审核子类型：{{ to.audittype }}</p>
              <p>审核人员：{{ to.auditusername }}</p>
              <span v-if="to.isnew == '2'">
                <p v-if="to.shbj == 1">审核进度：
                  <a-tag color="#87d068">通过</a-tag>
                </p>
                <p v-if="to.shbj == 2">审核进度：
                  <a-tag color="#f50">退回</a-tag>
                </p>
                <p v-if="to.shbj == 2">退回原因：{{ to.auditoption }}</p>
              </span>
              <span v-if="to.isnew == '1'">
                <p v-if="to.shbj == 0">审核进度：
                  <a-tag color="#ffd591">待审核</a-tag>
                </p>
              </span>
              <a-divider/>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-drawer>

    <a-modal v-model="xzlc" title="选择流程" centered @ok="handleOkxzlc">
      <a-card>
        <a-radio-group v-model="value">
          <a-radio :style="radioStyle" :value="1" v-for="item in lclistarr">
            {{ item.flowname }}
          </a-radio>
        </a-radio-group>
      </a-card>
    </a-modal>

    <tt-question-collect-modal ref="modalForm" @ok="modalFormOk"></tt-question-collect-modal>
  </a-card>
</template>

<script>
import { httpAction, getAction, putAction } from '@/api/manage'
import pick from 'lodash.pick'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TtQuestionCollectModal from './modules/TtQuestionCollectModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
import store from '@/store'

import Vue from 'vue'

const dqhycolumns = [
  {
    title: '影响行业',
    align: 'center',
    dataIndex: 'influenceindustry_dictText'
  },
  {
    title: '影响地区',
    align: 'center',
    dataIndex: 'influenceregion'
  }
]

export default {
  name: 'TtQuestionCollectList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDictSelectTag,
    TtQuestionCollectModal,
    JSuperQuery
  },
  data() {
    return {
      lclistarr: [],
      value: '1',
      xzlc: false,
      wtusername: '',
      todos: [],
      draweris: false,
      bmlcid: '',
      scbj: '',
      backText: '：',

      // 节点图表
      jdjpg: 'down-circle',

      visible: false,
      isshow: '2',
      description: '',

      // 地区行业数据表格
      tabledata: [],
      dqhycolumns,
      columns: [],
      settingColumns: [],

      // 主列表 表头
      defColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '产品名称',
          align: 'center',
          dataIndex: 'proname_dictText',
          scopedSlots: { customRender: 'proname' }
        },
        {
          title: '需求编号',
          align: 'center',
          dataIndex: 'questioncode'
        },
        {
          title: '标题',
          align: 'left',
          dataIndex: 'titlesummary',
          scopedSlots: { customRender: 'titleDetail' }
        },

        {
          title: '问题类型',
          align: 'center',
          dataIndex: 'questiontype_dictText',
          scopedSlots: { customRender: 'itemwtlx' }
        },
        {
          title: '要求上线时间',
          align: 'center',
          dataIndex: 'endtime'
          },
         {
          title: '紧急程度',
          align: 'center',
          dataIndex: 'priority_dictText',
          scopedSlots: { customRender: 'itemjjcd' }
        },
        {
          title: '收集人姓名',
          align: 'center',
          dataIndex: 'collectorname'
        },
        {
          title: '收集时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '审批状态/处理状态',
         // colSpan: 2,
          align: 'center',
          dataIndex: 'auditstatus_dictText',
          scopedSlots: { customRender: 'itemtext' }
        },

     /*   {
          title: '处理状态',
          colSpan: 0,
          align: 'center',
          dataIndex: 'dealstatus_dictText',
          scopedSlots: { customRender: 'itemclzt' }
        },
        */
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          // fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/tt_question_collect/ttQuestionCollect/list',
        delete: '/tt_question_collect/ttQuestionCollect/delete',
        deleteBatch: '/tt_question_collect/ttQuestionCollect/deleteBatch',
        exportXlsUrl: '/tt_question_collect/ttQuestionCollect/exportXls',
        importExcelUrl: 'tt_question_collect/ttQuestionCollect/importExcel',
        tjlc: '/tt_question_collect/ttCollectFlowNode/submitProcess',
        flowcodelist: '/tt_question_collect/ttCollectFlowNode/list',
        lclist: '/tt_question_collect/ttCollectFlow/list',
        querybytableid: '/tt_question_collect/ttQuestionCollect/querybytableid',
        querybmlcid: '/tt_question_collect/ttQuestionCollect/querybmlcid',
        delbyscbj: '/tt_question_collect/ttQuestionCollect/deletebyscbj'
      },
      dictOptions: {},
      superFieldList: []
    }
  },
  created() {
    this.getSuperFieldList()
    this.getAuthority()
    this.initColumns()
     this.getbmlcid()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {

     handleDeletebyscbj(ids) {
       putAction(this.url.delbyscbj, { id: ids }).then((res) => {
                     if (res.success) {
                                       this.$message.success(res.message)
                                       this.$emit('ok')
                                       this.loadData()
                                     } else {
                                       this.$message.warning(res.message)
                                     }
                     })
      },

      handleDetail: function(record) {
        this.$refs.modalForm.edit(record, 'xq')
        this.$refs.modalForm.title = '详情'
        this.$refs.modalForm.disableSubmit = true
      },

    handleAdd: function () {
      this.$refs.modalForm.add(this.bmlcid)
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record, this.bmlcid)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },

    onChange(e) {
      // console.log(`checked = ${e.target.checked}`);
      if (e.target.checked) {
        this.queryParam.isme = true
      } else {
        this.queryParam.isme = false
      }
      // console.log(this.queryParam.isme);
    },
    getbmlcid() {
      getAction(this.url.querybmlcid, { lclx: 'question' }).then((res) => {
        if (res.success) {
          this.bmlcid = res.result
          console.log('当前部门流程id', this.bmlcid)
        } else {
                  this.$message.warning(res.message)
                }
      })
    },
    onClose() {
      this.draweris = false
    },

    // 获取当前用户登录名
    getAuthority() {
      let usercode = store.getters.userInfo.id
      console.log('usercode:', usercode)
      this.wtusername = usercode
    },
    handleOkxzlc(wtcl) {
      console.log(wtcl)
    },

    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    query(record) {
      this.tabledata = []
      this.tabledata.push(record)
      this.visible = true
      console.log(record)
    },

    // 查看流程
    seeProcess(record) {
    //  if (record.auditstatus === '3') {
        // 如果是退回的记录，则显示shbj为1的退回记录
     //   this.scbj = '1'
    //  } else {
        this.scbj = '0'
   //   }

      let params = { id: record.id, scbj: this.scbj, lclx: 'wtlx' }
      getAction(this.url.flowcodelist, params).then((res) => {
        if (res.success) {
          let lis = res.result
          this.todos = lis
        }
      })

      // this.shjllczt(record.id)
      this.draweris = true
    },

    // 获取此问题的审核流程进行的节点状态
    shjllczt(id) {
      let params = { tableid: id, lclx: 'wtlx' }
      getAction(this.url.querybytableid, params).then((res) => {
        if (res.success) {
          let lis = res.result

          for (let a = 0; a < lis.length; a++) {
            console.log(lis[a])
          }
        }
      })
    },
    // 列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter((item) => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },

    initColumns() {
      // 权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      // this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter((item) => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },

    // 选择流程
    tjlcxzlc(record) {
      this.xzlc = true
      let params = { flowcode: '15454645185463152' }
      getAction(this.url.lclist, params).then((res) => {
        if (res.success) {
          this.lclistarr = res.result.records
        }
      })
    },
    // 提交流程
    startProcess(record) {
      if (this.wtusername !== record.createById) {
         this.$message.warning('不能提交非本人提出的问题!')
      } else {
        this.$confirm({
          title: '提示',
          content: '确认提交流程吗?',
          onOk: () => {
            const that = this
            that.loading = true
            that.confirmLoading = true
            var formData = new FormData()
            formData.append('id', record.id)
             formData.append('flowCode', this.bmlcid)
             //  formData.append('proname', record.proname)
            formData.append('lclx', 'wtlx')
            // axios.post(that.url.tjlc,formData)
            httpAction(that.url.tjlc, formData, 'post')
              .then((res) => {
                that.loading = false
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  that.loadData()
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.loading = false
                that.confirmLoading = false
              })
            this.sxzt = false
            this.sxzt = true
          }
        })
      }
    },
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'titlesummary', text: '标题' })
      fieldList.push({ type: 'string', value: 'project', text: '问题所属项目', dictCode: 'module' })
      fieldList.push({ type: 'string', value: 'questiontype', text: '问题类型', dictCode: 'task_type' })
      fieldList.push({ type: 'string', value: 'needtype', text: '需求类型', dictCode: 'task_xq_type' })
      fieldList.push({ type: 'string', value: 'priority', text: '紧急程度', dictCode: 'jjcd' })
      fieldList.push({ type: 'string', value: 'auditstatus', text: '审批状态', dictCode: 'sp_status' })
      fieldList.push({ type: 'string', value: 'priority', text: '处理状态', dictCode: 'dealstatus' })
      fieldList.push({ type: 'string', value: 'influenceregion', text: '影响范围' })
      fieldList.push({ type: 'string', value: 'influenceindustry', text: '影响行业' })
      fieldList.push({ type: 'string', value: 'questioncontent', text: '问题详细内容' })
      fieldList.push({ type: 'string', value: 'poroposername', text: 's提出人姓名' })
      fieldList.push({ type: 'date', value: 'endtime', text: '要求上线时间' })
      fieldList.push({ type: 'string', value: 'collectorname', text: '收集人姓名' })
      fieldList.push({ type: 'string', value: 'auditstatus', text: '审批状态' })
      fieldList.push({ type: 'string', value: 'dealstatus', text: '处理状态' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
